import React from 'react';
import { Button, Row, Col, Card, Typography, Space, Statistic } from 'antd';
import { useNavigate } from 'react-router-dom';
import {
  PictureOutlined,
  VideoCameraOutlined,
  ThunderboltOutlined,
  SafetyOutlined,
  CheckCircleOutlined,
  StarOutlined
} from '@ant-design/icons';
import './Home.css';

const { Title, Paragraph } = Typography;

const Home = () => {
  const navigate = useNavigate();

  const features = [
    {
      icon: <PictureOutlined className="feature-icon" />,
      title: '智能图片去水印',
      description: '支持JPG、PNG、WEBP等多种格式，AI智能识别并去除各种类型的水印'
    },
    {
      icon: <VideoCameraOutlined className="feature-icon" />,
      title: '视频去水印处理',
      description: '支持MP4、AVI、MOV等格式，保持视频质量和音频完整性'
    },
    {
      icon: <ThunderboltOutlined className="feature-icon" />,
      title: '快速批量处理',
      description: '支持批量上传和处理，提高工作效率，节省时间'
    },
    {
      icon: <SafetyOutlined className="feature-icon" />,
      title: '安全可靠',
      description: '本地处理，保护隐私，文件自动清理，确保数据安全'
    }
  ];

  const testimonials = [
    {
      name: '张设计师',
      role: 'UI设计师',
      content: '这个工具帮我快速去除了设计稿中的水印，效果非常好！',
      rating: 5
    },
    {
      name: '李摄影师',
      role: '摄影师',
      content: '批量处理功能很实用，处理速度也很快，推荐使用。',
      rating: 5
    },
    {
      name: '王编辑',
      role: '视频编辑',
      content: '视频去水印效果很棒，没有影响视频质量，很满意。',
      rating: 5
    }
  ];

  return (
    <div className="home-page">
      {/* Hero Section */}
      <section className="hero-section">
        <div className="container">
          <Row justify="center" align="middle">
            <Col xs={24} lg={12}>
              <div className="hero-content">
                <Title level={1} className="hero-title">
                  专业的AI智能去水印工具
                </Title>
                <Paragraph className="hero-description">
                  使用先进的AI技术，快速、准确地去除图片和视频中的水印，
                  支持多种格式和批量处理，让您的工作更高效。
                </Paragraph>
                <Space size="large">
                  <Button 
                    type="primary" 
                    size="large"
                    onClick={() => navigate('/register')}
                  >
                    立即开始
                  </Button>
                  <Button 
                    size="large"
                    onClick={() => navigate('/dashboard')}
                  >
                    免费试用
                  </Button>
                </Space>
              </div>
            </Col>
            <Col xs={24} lg={12}>
              <div className="hero-image">
                <div className="demo-image">
                  <PictureOutlined className="demo-icon" />
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </section>

      {/* Features Section */}
      <section className="features-section">
        <div className="container">
          <Title level={2} className="section-title text-center">
            核心功能
          </Title>
          <Row gutter={[24, 24]}>
            {features.map((feature, index) => (
              <Col xs={24} sm={12} lg={6} key={index}>
                <Card className="feature-card">
                  <div className="feature-content">
                    {feature.icon}
                    <Title level={4}>{feature.title}</Title>
                    <Paragraph>{feature.description}</Paragraph>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </section>

      {/* Stats Section */}
      <section className="stats-section">
        <div className="container">
          <Row gutter={[24, 24]} justify="center">
            <Col xs={12} sm={6}>
              <Statistic
                title="处理文件数"
                value={100000}
                suffix="+"
                valueStyle={{ color: '#1890ff' }}
              />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic
                title="用户满意度"
                value={98}
                suffix="%"
                valueStyle={{ color: '#52c41a' }}
              />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic
                title="处理成功率"
                value={99.5}
                suffix="%"
                valueStyle={{ color: '#722ed1' }}
              />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic
                title="平均处理时间"
                value={30}
                suffix="秒"
                valueStyle={{ color: '#fa8c16' }}
              />
            </Col>
          </Row>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="testimonials-section">
        <div className="container">
          <Title level={2} className="section-title text-center">
            用户评价
          </Title>
          <Row gutter={[24, 24]}>
            {testimonials.map((testimonial, index) => (
              <Col xs={24} md={8} key={index}>
                <Card className="testimonial-card">
                  <div className="testimonial-content">
                    <div className="testimonial-rating">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <StarOutlined key={i} className="star-icon" />
                      ))}
                    </div>
                    <Paragraph className="testimonial-text">
                      "{testimonial.content}"
                    </Paragraph>
                    <div className="testimonial-author">
                      <strong>{testimonial.name}</strong>
                      <span>{testimonial.role}</span>
                    </div>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta-section">
        <div className="container">
          <div className="cta-content text-center">
            <Title level={2}>准备好开始了吗？</Title>
            <Paragraph>
              立即注册，体验专业的AI去水印服务
            </Paragraph>
            <Space size="large">
              <Button 
                type="primary" 
                size="large"
                onClick={() => navigate('/register')}
              >
                免费注册
              </Button>
              <Button 
                size="large"
                onClick={() => navigate('/login')}
              >
                已有账号？登录
              </Button>
            </Space>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home; 